<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .swiper-container {
        width: 640px;
        height: 320px;
        overflow: hidden;
        /* 设置为参照物 */
        position: relative
    }

    .img-list {
        width: 5000px;
        position: relative;
        height: 320px;
        display: flex;
        /* 过度效果 */
        transition: transform 0.3s
    }

    .img-list img {
        width: 640px;
        height: 320px;
    }

    .imgbox {
        position: relative;
    }

    .btn-list {
        /* 实现按钮再图片下方显示   参照物是swiper-container*/
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 4%;
    }

    .btn-list span {
        background-color: rgba(255, 255, 255, 0.5);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin: 0 2px;
    }

    .actived {
        background-color: #fff !important;
    }

    .left,
    .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 10px;
        cursor: pointer;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
</style>

<body>
    <div class="swiper-container">
        <div class="imgbox">
            <div class="img-list">
                <img src="https://img2.baidu.com/it/u=2367503158,2166775028&fm=26&fmt=auto&gp=0.jpg" alt="">
                <img src="https://img0.baidu.com/it/u=2346330857,638146584&fm=26&fmt=auto" alt="">
                <img src="https://img0.baidu.com/it/u=1178720984,1464721518&fm=26&fmt=auto" alt="">
                <img src="https://img0.baidu.com/it/u=1178720984,1464721518&fm=26&fmt=auto" alt="">
            </div>
            <div class="left" onclick="left()">向左</div>
            <div class="right" onclick="right()">向右</div>
            <div class="btn-list"></div>
        </div>
    </div>
    <script>
        //实现轮播图
        //图片横向布局
        //先获取到按钮元素
        //获取到图片的组合
        //然后给按钮列表加一个点击事件
        //点击事件 中实现图片的移动达到轮播图的效果


        //动态获取图片的宽度
        var imgWidth = document.querySelector('img').width;
        //移出移入事件盒子
        var imgbox = document.querySelector('.imgbox');
        //获取轮播父盒子元素(操纵盒子移动)
        var imgBox = document.querySelector(".img-list");
        //获取创建指示器所有圆点
        var indicatorList = document.querySelector('.btn-list')
        //获取所有轮播图元素
        var imageList = null;
        //轮播图执行完一轮的次数(下标)
        var sum = 0;
        //自动轮播变量(创建与销毁)
        var timer = null;

        //动态获取所有轮播图数量以及渲染指示器dom
        imageListChange();
        //创建定时器
        timerLoding();
        //向左滑动事件
        function left() {
            imgLeftTransform()
        }
        //向右滑动事件
        function right() {
            sum++;
            imgRightTransform();
        }
        //移入
        imgbox.addEventListener('mouseover', function () {
            destory();
        })
        //移出
        imgbox.addEventListener('mouseout', function () {
            timerLoding();
        })
        //动态获取所有轮播图数量
        function imageListChange() {
            imageList = document.querySelectorAll('.img-list img');
            //动态添加指示器
            for (let i = 0; i < imageList.length; i++) {
                var span = document.createElement('span');
                indicatorList.appendChild(span);
            }
             //动态更改定时器指示器状态
            indicator();
        }

        //创建定时器
        function timerLoding() {
            timer = setInterval(() => {
                imgRightTransform();
                sum++;
            }, 2000);
        }

        //销毁定时器
        function destory() {
            clearInterval(timer);
        }
        //顺时针
        function imgRightTransform() {
            if (sum > imageList.length - 1) {
                sum = 0;
            }
            indicator();
            imgBox.style.transform = `translate(${-imgWidth * sum}px)`;
        }
        //逆时针
        function imgLeftTransform() {
            sum--;
            if (sum < 0) {
                sum = imageList.length - 1;
            }
            indicator();
            imgBox.style.transform = `translate(${-imgWidth * sum}px)`;
        }
        //动态更改定时器指示器
        function indicator() {
            //排他思想
            for (let i = 0; i < imageList.length; i++) {
                indicatorList.children[i].classList.remove('actived')
            }
            indicatorList.children[sum].classList.add('actived')
        }
    </script>
</body>

</html>